<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        ajax_method('http://localhost:8000/api/menu', 
            {
                menu_name:'test_naem',
                menu_level:2
            }, 
            'post',
            (data) => {
                console.log(data)
            });
        function ajax_method(url, data, method, success) {
            // 异步对象
            var ajax = new XMLHttpRequest();

            // get 跟post  需要分别写不同的代码
            if (method == 'get') {
                // get请求
                if (data) {
                    // 如果有值
                    url += '?';
                    url += data;
                } else {

                }
                // 设置 方法 以及 url
                ajax.open(method, url);

                // send即可
                ajax.send();
            } else {
                // post请求
                // post请求 url 是不需要改变
                ajax.open(method, url);

                // 需要设置请求报文
                ajax.setRequestHeader("Content-type", "application/json");

                // 判断data send发送数据
                if (data) {
                    // 如果有值 从send发送
                    ajax.send(JSON.stringify(data));
                } else {
                    // 木有值 直接发送即可
                    ajax.send();
                }
            }

            // 注册事件
            ajax.onreadystatechange = function () {
                // 在事件中 获取数据 并修改界面显示
                if (ajax.readyState == 4 && ajax.status == 200) {
                    // console.log(ajax.responseText);

                    // 将 数据 让 外面可以使用
                    // return ajax.responseText;

                    // 当 onreadystatechange 调用时 说明 数据回来了
                    // ajax.responseText;

                    // 如果说 外面可以传入一个 function 作为参数 success
                    success(ajax.responseText);
                }
            }

        }
    </script>
</body>

</html>